<template>
	<view class="body">
		<u-navbar
			title="确认订单"
			title-color="#000"
			:title-bold="true"
			:border-bottom="false"
			:background="{ background: '#ffffff' }"
			:back-icon-color="'#000'"
			:is-back="true"
		></u-navbar>

		<!-- 地址选择区域 -->
		<view class="address-section" @click="addresIndex()">
			<view class="address-icon">
				<image src="/static/order/index.png" mode="" style="width: 48rpx; height: 48rpx"></image>
			</view>
			<view class="address-content">
				<view class="address-title" v-if="selectedAddress">{{ selectedAddress.receiverName }} {{ selectedAddress.phoneNumber }}</view>
				<view class="address-tip" v-if="selectedAddress">{{ selectedAddress.address }}</view>
				<view class="address-title" v-if="!selectedAddress">暂无收货地址</view>
				<view class="address-tip" v-if="!selectedAddress">请详细填写本人收货地址，如xx小区x栋xx</view>
			</view>
			<view class="address-arrow"></view>
		</view>
		<x-address ref="addressRef" :visible="showSelector" @update:visible="showSelector = $event" @select="handleSelectAddress"></x-address>

		<x-goods-card
			:order="goodsDetail"
			:totalNum="totalNum"
			:getImgUrl="getImgUrl"
			:todayPrice="goodsDetail.todayPrice"
			:goodStars="goodsDetail.goodStars"
			:goodName="goodsDetail.goodName"
		></x-goods-card>

		<view class="tag">
			<view class="flex align-center flex-between">
				<text>实际付款</text>
				<text>¥{{ goodsDetail.todayPrice * totalNum }}</text>
			</view>
			<!-- <view class="flex align-center flex-between">
				<text>订单号</text>
				<text>
					5874120011444
					<image @click="onCopy('5874120011444')" src="/static/user/Frame(1).png" style="width: 24rpx; height: 24rpx; margin: 0rpx 0 0 10rpx" mode="aspectFill"></image>
				</text>
			</view> -->
		</view>

		<view class="footer row bg-white fixed">
			<view class="footer-left">
				<view class="left-price">
					<span>￥</span>
					{{ goodsDetail.todayPrice * totalNum }}
				</view>
				<view>
					{{ str }}
				</view>
			</view>
			<view class="add-cart br60 white mr20 ml10 md" @tap="handlePay()">立即购买</view>
		</view>

		<view class="flex flex-column" style="margin-top: 300rpx" v-if="goodsDetail.ablePayType == 1">
			请选择支付方式：
			<view class="flex align-center flex-around">
				<view v-for="(item, index) in list" :class="['mt-30', 'text-ptn', strIndex == index ? 'text-ptn2' : '']" @click="sheetTap(index)">
					{{ item.text }}
				</view>
			</view>
		</view>

		<u-popup v-model="show" mode="center">
			<view class="show-backround">
				<view class="">
					<image src="/static/order/error.png" mode="" style="width: 76rpx; height: 76rpx"></image>
				</view>
				<view class="text">
					<text class="text-name">支付失败</text>
					<text>优惠券金额不够哦</text>
				</view>
				<view class="btn" @click="show = false">我知道了</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import oerder from '@/api/oerder';
import main from '@/api/main';
import user from '@/api/user';
export default {
	data() {
		return {
			show: false,
			strIndex: -1,
			selectedAddress: null,
			currentOrder: null,
			showSelector: false,
			goodsDetail: {},
			totalNum: '0',
			str: '请选择支付方式',
			list: [
				{
					text: '余额',
					moneyType: 1
				},
				{
					text: '提货卷',
					moneyType: 2
				}
			]
		};
	},
	async onLoad(o) {
		if (o.goodId) {
			await this.getApClass(o.goodId);
			this.list[1].text = this.goodsDetail.goodType == 1 ? '提货卷' : '津贴卷';
			this.list[1].moneyType = this.goodsDetail.goodType == 1 ? 2 : 3;

			if (this.goodsDetail.ablePayType == 2) {
				this.str = this.list[0].text;
				this.strIndex = 0
			} else if (this.goodsDetail.ablePayType == 3) {
				this.str = this.list[1].text;
				this.strIndex = 1
			}
		}
		if (o.totalNum) {
			this.totalNum = o.totalNum;
		}
		this.getAppaddList();
	},
	onShow() {
		this.$refs.addressRef?.getAppaddList();
	},
	computed: {
		getImgUrl() {
			return this.goodsDetail.goodImg?.split(',')[0] || '';
		}
	},
	methods: {
		sheetTap(index) {
			this.str = this.list[index].text;
			this.strIndex = index;
		},
		//获取默认地址
		getAppaddList() {
			user.getAppaddList({ isDefault: 2 }).then((res) => {
				this.selectedAddress = res.rows[0];
			});
		},
		handleSelectAddress(address) {
			this.selectedAddress = address;
		},
		//选择地址
		addresIndex() {
			this.showSelector = true;
		},
		// 支付操作
		async handlePay() {
			if (!this.selectedAddress) {
				uni.showToast({
					title: '请选择收货地址',
					icon: 'none'
				});
				return;
			}
			if (this.strIndex == -1) {
				uni.showToast({
					title: '请选择支付方式',
					icon: 'none'
				});
				return;
			}

			uni.showLoading({
				title: '提交订单中...'
			});

			try {
				// 创建订单
				const orderData = {
					receiverName: this.selectedAddress.receiverName, //收货人
					receiverPhone: this.selectedAddress.phoneNumber, //收货电话
					receiverAddress: this.selectedAddress.address, //收货地址
					goodId: this.goodsDetail.id,
					totalNum: this.totalNum,
					moneyType: this.list[this.strIndex].moneyType
				};

				uni.hideLoading();
				const prcie = this.goodsDetail.todayPrice * this.totalNum;

				if (this.goodsDetail.goodType == 1) {
					oerder.buyPbGood(orderData).then((res) => {
						// 延迟跳转让用户看到提示
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/goods_details/paymentSuccess/paymentSuccess?prcie=${prcie}&moneyType=${orderData.moneyType}`
							});
						}, 1000);
					});
				} else if (this.goodsDetail.goodType == 2) {
					oerder.buyAllowanceGood(orderData).then((res) => {
						// 延迟跳转让用户看到提示
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/goods_details/paymentSuccess/paymentSuccess?prcie=${prcie}&moneyType=${orderData.moneyType}`
							});
						}, 1000);
					});
				}
			} catch (e) {
				uni.hideLoading();
				uni.showToast({
					title: '系统错误，请稍后再试',
					icon: 'none'
				});
				console.error(e);
			}
		},
		onCopy(row) {
			wx.setClipboardData({
				data: row,
				success(res) {
					wx.showToast({
						title: '复制成功',
						icon: 'success'
					});
				}
			});
		},
		async getApClass(id) {
			const res = await main.getIdGood(id);
			this.goodsDetail = res.data;
		}
	}
};
</script>

<style lang="scss" scoped>
.body {
	margin: 0 30rpx;
}
.text-ptn {
	border: #333333 solid 2rpx;
	padding: 5rpx 15rpx;
	border-radius: 10rpx;
}
.text-ptn2 {
	border: #2c87ff solid 2rpx;
	color: #2c87ff;
}
.tag {
	background-color: #fff;

	margin: 30rpx 0;
	padding: 30rpx;
	border-radius: 30rpx;
}
.show-backround {
	height: 350rpx;
	width: 500rpx;
	background-color: #fff;
	border-radius: 45rpx;
	padding: 30rpx;
	display: flex;
	justify-content: space-around;
	flex-direction: column;
	align-items: center;

	.text {
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
		.text-name {
			font-weight: 600;
			font-size: 32rpx;
		}
	}

	.btn {
		width: 172rpx;
		height: 52rpx;
		border-radius: 70rpx 70rpx 70rpx 70rpx;
		border: 2rpx solid #f88725;

		font-size: 26rpx;
		color: #f88725;

		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.footer {
	height: 150rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding-bottom: env(safe-area-inset-bottom);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;

	.footer-left {
		font-size: 20rpx;
		color: #f05a39;
		display: flex;
		justify-content: center;
		align-items: center;
		.left-price {
			font-size: 45rpx;
			font-weight: bold;
			span {
				font-size: 28rpx;
			}
		}
	}
	.add-cart {
		background-color: #ffa630;
		width: 200rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
/* 地址选择区域 */
.address-section {
	background-color: #fff;
	padding: 30rpx;
	margin: 20rpx 0;
	position: relative;
	display: flex;
	align-items: center;
	border-radius: 30rpx;
	.address-icon {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}
	.address-content {
		flex: 1;

		.address-title {
			font-size: 30rpx;
			color: #333;
			margin-bottom: 10rpx;
		}

		.address-tip {
			font-size: 26rpx;
			color: #999;
		}
	}

	.address-arrow {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.address-arrow::after {
		content: '';
		display: block;
		width: 16rpx;
		height: 16rpx;
		border-top: 2rpx solid #999;
		border-right: 2rpx solid #999;
		transform: rotate(45deg);
	}
}
</style>
